<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>园</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        body{
            padding: 100px;
            background: green;
        }
        p{
            margin-top: 20px;
        }
        a{
            color: lightskyblue;
            display: block;
            padding: 20px;
        }
        input{
            background: pink;
            outline: none;
            border: 1px solid #f45656;
        }
    </style>
</head>

<body>
    <form action="">
       <p>半径：<input type="text" id="a" disabled></p>
        
        <p>周长：<input type="text" id="b" disabled></p>
        
        <p>面积：<input type="text" id="c" disabled> </p>
        <a href="">刷新</a>
        
    </form>
    <script>
        var y = Math.PI;
        var p = 2;
        var r = prompt("请输入半径");
        r = Number(r);
        if (Boolean(r)) {
            document.querySelector("#a").value = r;
            document.querySelector("#b").value = p*r*y;
            document.querySelector("#c").value = r*r*y;
        }
        else {
            alert("请输入有效值");
        }
         
    </script>
</body>

</html>